<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <title>课堂</title>
  <link rel="stylesheet" href="./lib/dcloud-mui/dist/css/mui.min.css">
  <link rel="stylesheet" href="./css/main.min.css">
  <script src="./lib/dcloud-mui/dist/js/mui.min.js" charset="utf-8"></script>
  <script src="./fonts/iconfont.js" charset="utf-8"></script>
</head>

<body>

  <div class="mui-content">
    <div id="ost_classRoom" class="mui-slider">

      <!-- 选项卡盒子 -->
      <div id="ost_classTabBox">

        <!-- 选项卡导航 -->
        <div id="ost_classTab" class="mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
          <a class="mui-control-item" href="#class_FAQ.html">
            <svg class="icon ost_indexSubnavTitle" aria-hidden="true">
              <use xlink:href="#icon-ost_fontChangjianwen"></use>
            </svg>
  			  </a>
          <a class="mui-control-item" href="#class_basic.html">
            <svg class="icon ost_indexSubnavTitle" aria-hidden="true">
              <use xlink:href="#icon-ost_fontJichujiaoche"></use>
            </svg>
  			  </a>
          <a class="mui-control-item" href="#class_advance.html">
            <svg class="icon ost_indexSubnavTitle" aria-hidden="true">
              <use xlink:href="#icon-ost_fontJinjiejiaoch"></use>
            </svg>
  			  </a>
          <a class="mui-control-item" href="#class_Live.html">
            <svg class="icon ost_indexSubnavTitle" aria-hidden="true">
              <use xlink:href="#icon-ost_fontDaketang"></use>
            </svg>
  			  </a>
        </div>

        <!-- 选项卡状态栏 -->
        <div class="mui-slider-progress-bar mui-col-xs-3" id="ost_classTabActive"></div>
      </div>

      <!-- 选项卡内容 -->
      <ul class="mui-table-view mui-table-view-chevron" id="ost_classFAQ">
        <li class="mui-table-view-cell">
          <a class="mui-navigate-right" href="#account">
            <img class="mui-media-object mui-pull-left head-img" src="./images/class1/FAQ1.png">
            <div class="mui-media-body">什么叫做保底工资？
              <p class="mui-ellipsis">主播的保底工资到底是怎么样计算？</p>
            </div>
          </a>
        </li>
        <li class="mui-table-view-cell">
          <a class="mui-navigate-right" href="#account">
            <img class="mui-media-object mui-pull-left head-img" src="./images/class1/FAQ2.png">
            <div class="mui-media-body">什么叫做有效时长？
              <p class="mui-ellipsis">有效时长主播应该怎么样来计算？</p>
            </div>
          </a>
        </li>
        <li class="mui-table-view-cell">
          <a class="mui-navigate-right" href="#account">
            <img class="mui-media-object mui-pull-left head-img" src="./images/class1/FAQ3.png">
            <div class="mui-media-body">怎么样才能成为一名优秀的主播？
              <p class="mui-ellipsis">……</p>
            </div>
          </a>
        </li>
        <li class="mui-table-view-cell">
          <a class="mui-navigate-right" href="#account">
            <img class="mui-media-object mui-pull-left head-img" src="./images/class1/FAQ4.png">
            <div class="mui-media-body">OST娱乐可以帮助你做些什么？
              <p class="mui-ellipsis">你想了解……</p>
            </div>
          </a>
        </li>
        <li class="mui-table-view-cell">
          <a class="mui-navigate-right" href="#account">
            <img class="mui-media-object mui-pull-left head-img" src="./images/class1/FAQ5.png">
            <div class="mui-media-body">OST娱乐的结算规则是什么？
              <p class="mui-ellipsis">到底应该怎么样来结算？</p>
            </div>
          </a>
        </li>
        <li class="mui-table-view-cell">
          <a class="mui-navigate-right" href="#account">
            <img class="mui-media-object mui-pull-left head-img" src="./images/class1/FAQ1.png">
            <div class="mui-media-body">为什么选择OST娱乐？
              <p class="mui-ellipsis">……</p>
            </div>
          </a>
        </li>
        <li class="mui-table-view-cell">
          <a class="mui-navigate-right" href="#account">
            <img class="mui-media-object mui-pull-left head-img" src="./images/class1/FAQ1.png">
            <div class="mui-media-body">为什么选择OST娱乐？
              <p class="mui-ellipsis">……</p>
            </div>
          </a>
        </li>
        <li class="mui-table-view-cell">
          <a class="mui-navigate-right" href="#account">
            <img class="mui-media-object mui-pull-left head-img" src="./images/class1/FAQ1.png">
            <div class="mui-media-body">为什么选择OST娱乐？
              <p class="mui-ellipsis">……</p>
            </div>
          </a>
        </li>
        <li class="mui-table-view-cell">
          <a class="mui-navigate-right" href="#account">
            <img class="mui-media-object mui-pull-left head-img" src="./images/class1/FAQ1.png">
            <div class="mui-media-body">为什么选择OST娱乐？
              <p class="mui-ellipsis">……</p>
            </div>
          </a>
        </li>
      </ul>
    </div>
  </div>

  <!--导航-->
  <nav class="mui-bar mui-bar-tab" id="ost_nav">
    <a class="mui-tab-item" id="page_index" href="./index.html">
      <svg class="icon" aria-hidden="true">
        <use xlink:href="#icon-ost_shouye"></use>
      </svg>
      <span>首页</span>
    </a>
    <a class="mui-tab-item" id="page_classRoom" href="./class_FAQ.html">
      <svg class="icon" aria-hidden="true">
        <use xlink:href="#icon-ost_ketang_hover"></use>
      </svg>
      <span>课堂</span>
    </a>
    <a class="mui-tab-item" id="page_mine" href="./mine.html">
      <svg class="icon" aria-hidden="true">
        <use xlink:href="#icon-ost_wode"></use>
      </svg>
      <span>我的</span>
    </a>
  </nav>


  <script src="./js/ost.js" charset="utf-8"></script>
  <script type="text/javascript">
    // 课堂选项卡内容的高度填充全屏
    document.getElementById("ost_classFAQ").style.minHeight = window.screen.availHeight - 110 + "px";
  </script>
</body>

</html>
